表單驗證輸入簡介

官方文件
表單驗證可以幫助我們確保 User 以正確格式填寫表單資料，
確保提交的資料能使系統正常工作。

示意圖

範例: 使用 NgModel 綁值

<!--XXX.component.html-->
<!--#name="ngModel"把 NgModel 匯出成區域變數 name-->
<!--使用 HTML<input>驗證屬性：required, minlength-->
<!--forbiddenName是自訂的驗證器-->
<input type="text" [(ngModel)]="hero.name" #name="ngModel"
       required  minlength="4" appForbiddenName="bob">

<!--AbstractControl：valid, dirty..可檢視控制項的狀態-->
<div *ngIf="name.invalid && (name.dirty || name.touched)">
  <div *ngIf="name.errors?.['required']">名稱必填</div>
  <div *ngIf="name.errors?.['minlength']">名稱至少要四個字元</div>
  <div *ngIf="name.errors?.['forbiddenName']">名稱不可以是 Bob </div>
</div>

範例: 使用 FormControl 綁值

隨機找的線上Demo

// XXX.component.ts
// name 有三個驗證器:必填、最小長度、自定義
this.heroForm = new FormGroup({
  name: new FormControl(this.hero.name, [
    Validators.required,
    Validators.minLength(4),
    forbiddenNameValidator(/bob/i)
  ]),
  alterEgo: new FormControl(this.hero.alterEgo),
  power: new FormControl(this.hero.power, Validators.required)
});

// getter 方法 
// 方便你在 html 使用表單控制項
get name() { return this.heroForm.get('name'); }

<!--XXX.component.html-->
<!--其實在 FormControl 那邊就有設定 required 了，不過還是保留下來-->
<!--官方說法是為了無障礙性(accessibility purposes)，應該意思是怕開發者忘記?-->
<input type="text" formControlName="name" required>

<div *ngIf="name.invalid && (name.dirty || name.touched)">
  <div *ngIf="name.errors?.['required']">名稱必填</div>
  <div *ngIf="name.errors?.['minlength']">名稱至少要四個字元</div>
  <div *ngIf="name.errors?.['forbiddenName']">名稱不可以是 Bob </div>
</div>

官方文件後面還有自定義驗證器、跨欄位交叉驗證、非同步驗證等...
有興趣可以再去看看！

其他

HTML 驗證屬性

Web - 第二十二章 | HTML 表單資料驗證(一)

(### CSS 驗證)

AbstractControl

Angular - AbstractControl

Day18-Form 表單

相關類別	說明

AbstractControl | FormGroup, FormArray, FormControl 的抽象類別

AbstractControl · angular学习笔记 · 看云

有空會補上整理的表格

參考來源

Client-side form validation - Learn web development | MDN